<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>充电桩订单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索 -->
    <el-form :inline="true" style="margin-top: 20px;">
      <el-form-item>
        <el-button size="small" @click="exportExcel">导出Excel</el-button>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          v-model="userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          v-model="name"
          placeholder="请输入站点名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          v-model="stationName"
          placeholder="请输入充电桩名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          v-model="portName"
          placeholder="请输入端口名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="status" placeholder="请选择订单状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="flag" placeholder="是否分销订单">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          size="small"
          v-model="startTime"
          align="right"
          type="date"
          placeholder="搜索开始时间（年/月/日）"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="chongzhi"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table
      size="small"
      ref="multipleTable"
      :data="OrderData"
      element-loading-text="拼命加载中"
      style="width: 100%;"
      v-horizontal-scroll
    >
      <!-- v-horizontal-scroll="'always'" -->
      <el-table-column
        align="center"
        sortable
        type="index"
        label="序号"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="distributorsName"
        label="分销人昵称"
        width="200"
        v-if="flag === 1"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="commission"
        label="分销金额"
        width="200"
        v-if="flag === 1"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.commission / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="userName"
        label="用户名"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="orderNum"
        label="订单编号"
        width="200"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="electric"
        label="充电度数"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.electric / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="price"
        label="产生电费(元)"
        width="140"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.price / 1000000 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="service"
        label="订单服务费(元)"
        width="180"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.service / 1000000 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="totalMoney"
        label="订单总额(元)"
        width="120"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.totalMoney / 1000000 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="payMoney"
        label="合计支付(元)"
        width="120"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.payMoney / 10000 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="siteTitle"
        label="站点名"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="stationTitle"
        label="充电桩名称"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="type"
        label="充电桩类型"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="portTitle"
        label="端口号名称"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="startTime"
        label="开始时间"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.startTime">
            {{ transformDate(scope.row.startTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="endTime"
        label="结束时间"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.endTime">
            {{ transformDate(scope.row.endTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="status"
        :formatter="Status"
        label="订单状态"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="payStatus"
        :formatter="PayStatus"
        label="支付状态"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="totalTime"
        label="已充时间"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ secondsToMinutes(scope.row.totalTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="coupon"
        label="优惠券优惠金额"
        width="140"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.coupon / 1000000 }}</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        sortable
        prop="payWay"
        label="支付方式"
        :formatter="PayWay"
        width="120"
      ></el-table-column>
      <!-- <el-table-column align="center" sortable prop="payTime" label="交易时间" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.payTime">{{ transformDate(scope.row.payTime) }}</div>
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        sortable
        prop="voltage"
        label="电压(V)"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.voltage / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="current"
        label="电流(A)"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.current / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="power"
        label="功率(kw)"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.power / 100000 }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" sortable prop="park" label="停车费" width="150"></el-table-column> -->
      <el-table-column
        align="center"
        sortable
        prop="sendTime"
        label="枪上送时间"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.sendTime">
            {{ transformDate(scope.row.sendTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="electric"
        label="枪使用电量(度)"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.electric / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="lossElectric"
        label="枪计损电量(度)"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="remainTime"
        label="剩余时间"
        width="150"
      >
        <!-- <template slot-scope="scope">
          <div v-if="scope.row.remainTime">{{ transformDate(scope.row.remainTime) }}</div>
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="temperature"
        label="枪温度"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.temperature / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="connection"
        label="枪连接状态"
        width="150"
        :formatter="Connection"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="booking"
        label="订单类型"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.booking === 0">实时扫码订单</div>
          <div v-if="scope.row.booking === 1">预约订单</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="deposit"
        label="押金"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.deposit / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="payType"
        label="订单类型"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.payType === 0">余额支付</div>
          <div v-if="scope.row.payType === 1">预付费</div>
          <div v-if="scope.row.payType === 2">预约充电</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="prePay"
        label="预付费金额"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.prePay / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="preWay"
        label="预付费订单余额不足采取方式"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.preWay === 0">使用余额充电</div>
          <div v-if="scope.row.preWay === 1">停止充电</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="preExtra"
        label="额外扣除余额"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.preExtra / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="refundStatus"
        label="退款状态"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.refundStatus === 0">待退款</div>
          <div v-if="scope.row.refundStatus === 1">退款成功</div>
          <div v-if="scope.row.refundStatus === 2">退款失败</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="refund"
        label="是否需退款订单"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.refund === 0">无退款</div>
          <div v-if="scope.row.refund === 1">有退款</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="refundAmount"
        label="退款金额"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.refundAmount / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="refundRemark"
        label="退款原因"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="stopRemark"
        label="终止原因"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="bookStart"
        label="订单是否启动"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.bookStart === 0">未启动</div>
          <div v-if="scope.row.bookStart === 1">启动中</div>
          <div v-if="scope.row.bookStart === 2">启动成功</div>
          <div v-if="scope.row.bookStart === 3">启动失败</div>
          <div v-if="scope.row.bookStart === 4">失效</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="flag"
        label="是否分销订单"
        width="140"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.flag === 0">不是</div>
          <div v-else>是</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="bookStartTime"
        label="预约开始时间"
        width="160px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.bookStartTime">
            {{ transformDate(scope.row.bookStartTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="bookEndTime"
        label="预约结束时间"
        width="160px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.bookEndTime">
            {{ transformDate(scope.row.bookEndTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="createTime"
        label="创建时间"
        width="160px"
      >
        <template slot-scope="scope">
          <div>{{ transformDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="getXQ(scope.row)"
            >查看订单详情</el-button
          >
          <!-- <el-button size="mini" type="primary" @click="OpenPark(scope.row)">设置停车费</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情 -->
    <el-dialog title="充电桩订单详情页：" :visible.sync="editFormDetails">
      <el-form label-width="210px">
        <el-form-item label="是否分销订单：">
          <span v-if="this.Details.flag == 0">不是</span>
          <span v-if="this.Details.flag == 1">是</span>
        </el-form-item>
        <el-form-item label="分销人昵称：" v-if="this.Details.flag === 1">
          <span v-html="this.Details.distributorsName"></span>
        </el-form-item>
        <el-form-item label="分销金额：" v-if="this.Details.flag === 1">
          <span v-html="this.Details.commission / 100"></span>
        </el-form-item>
        <el-form-item label="用户名：">
          <span v-html="this.Details.userName"></span>
        </el-form-item>
        <el-form-item label="订单编号：">
          <span v-html="this.Details.orderNum"></span>
        </el-form-item>
        <el-form-item label="充电度数：">
          <span v-html="this.Details.electric / 100"></span>
        </el-form-item>
        <el-form-item label="产生电费(元)：">
          <span v-html="this.Details.price / 1000000"></span>
        </el-form-item>
        <el-form-item label="订单服务费：">
          <span v-html="this.Details.service / 1000000"></span>
        </el-form-item>
        <el-form-item label="订单总额(元)：">
          <span v-html="this.Details.totalMoney / 1000000"></span>
        </el-form-item>
        <el-form-item label="合计支付(元)：">
          <span v-html="this.Details.payMoney / 10000"></span>
        </el-form-item>
        <el-form-item label="站点名：">
          <span v-html="this.Details.siteTitle"></span>
        </el-form-item>
        <el-form-item label="充电桩名称：">
          <span v-html="this.Details.stationTitle"></span>
        </el-form-item>
        <el-form-item label="充电桩类型：">
          <span v-html="this.Details.type"></span>
        </el-form-item>
        <el-form-item label="端口号名称：">
          <span v-html="this.Details.portTitle"></span>
        </el-form-item>
        <el-form-item label="开始时间：">
          <span v-if="this.Details.startTime">{{
            transformDate(this.Details.startTime)
          }}</span>
        </el-form-item>
        <el-form-item label="结束时间：">
          <span v-if="this.Details.endTime">{{
            transformDate(this.Details.endTime)
          }}</span>
        </el-form-item>
        <el-form-item label="订单状态：">
          <span v-if="this.Details.status == 0">待激活</span>
          <span v-if="this.Details.status == 1">待充电</span>
          <span v-if="this.Details.status == 2">充电中</span>
          <span v-if="this.Details.status == 3">充电完成</span>
          <span v-if="this.Details.status == 4">已关闭</span>
        </el-form-item>
        <el-form-item label="支付状态：">
          <span v-if="this.Details.payStatus == 0">待支付</span>
          <span v-if="this.Details.payStatus == 1">部分支付</span>
          <span v-if="this.Details.payStatus == 2">全部支付</span>
        </el-form-item>
        <el-form-item label="已充时间：">
          <span>{{ secondsToMinutes(this.Details.totalTime) }} </span>
        </el-form-item>
        <el-form-item label="优惠券优惠金额：">
          <span v-html="this.Details.coupon / 1000000"></span>
        </el-form-item>
        <el-form-item label="支付方式：">
          <span v-if="this.Details.payWay == 1">微信支付</span>
          <span v-if="this.Details.payWay == 2">余额</span>
        </el-form-item>
        <!-- <el-form-item label="交易时间：">
          <span v-if="this.Details.payTime">{{ transformDate(this.Details.payTime) }}</span>
        </el-form-item> -->
        <el-form-item label="电压(V)：">
          <span v-html="this.Details.voltage / 100"></span>
        </el-form-item>
        <el-form-item label="电流(A)：">
          <span v-html="this.Details.current / 100"></span>
        </el-form-item>
        <el-form-item label="功率(kw)：">
          <span v-html="this.Details.power / 100000"></span>
        </el-form-item>
        <el-form-item label="停车费：">
          <span v-html="this.Details.park" v-if="this.Details.park"></span>
          <span v-else>未设置停车费</span>
        </el-form-item>
        <el-form-item label="枪上送时间：">
          <span v-if="this.Details.sendTime">{{
            transformDate(this.Details.sendTime)
          }}</span>
        </el-form-item>
        <el-form-item label="枪使用电量(度)：">
          <span v-html="this.Details.electric / 100"></span>
        </el-form-item>
        <el-form-item label="枪计损电量(度)：">
          <span v-html="this.Details.lossElectric"></span>
        </el-form-item>
        <el-form-item label="剩余时间：">
          <span v-html="this.Details.remainTime"></span>
        </el-form-item>
        <el-form-item label="枪温度：">
          <span v-html="this.Details.temperature / 100"></span>
        </el-form-item>
        <el-form-item label="枪连接状态：">
          <span v-if="this.Details.connection == 0">已连接</span>
          <span v-if="this.Details.connection == 1">未连接</span>
        </el-form-item>
        <el-form-item label="订单类型：">
          <span v-if="this.Details.booking == 0">实时扫码订单</span>
          <span v-if="this.Details.booking == 1">预约订单</span>
        </el-form-item>
        <el-form-item label="押金：">
          <span v-html="this.Details.deposit / 100"></span>
        </el-form-item>
        <el-form-item label="订单类型：">
          <span v-if="this.Details.payType == 0">余额支付</span>
          <span v-if="this.Details.payType == 1">预付费</span>
          <span v-if="this.Details.payType == 2">预约充电</span>
        </el-form-item>
        <el-form-item label="预付费金额：">
          <span v-html="this.Details.prePay / 100"></span>
        </el-form-item>
        <el-form-item label="预付费订单余额不足采取方式：">
          <span v-if="this.Details.preWay == 0">使用余额充电</span>
          <span v-if="this.Details.preWay == 1">停止充电</span>
        </el-form-item>
        <el-form-item label="额外扣除余额：">
          <span v-html="this.Details.preExtra"></span>
        </el-form-item>
        <el-form-item label="退款状态：">
          <span v-if="this.Details.refundStatus == 0">待退款</span>
          <span v-if="this.Details.prefundStatus == 1">退款成功</span>
          <span v-if="this.Details.refundStatus == 2">退款失败</span>
        </el-form-item>
        <el-form-item label="是否需退款订单：">
          <span v-if="this.Details.rrefund == 0">无退款</span>
          <span v-if="this.Details.refund == 1">有退款</span>
        </el-form-item>
        <el-form-item label="退款金额：">
          <span v-html="this.Details.refundAmount / 100"></span>
        </el-form-item>
        <el-form-item label="退款原因：">
          <span v-html="this.Details.refundRemark"></span>
        </el-form-item>
        <el-form-item label="终止原因：">
          <span v-html="this.Details.stopRemark"></span>
        </el-form-item>
        <el-form-item label="订单是否启动：">
          <span v-if="this.Details.bookStart == 0">未启动</span>
          <span v-if="this.Details.bookStart == 1">启动中</span>
          <span v-if="this.Details.bookStart == 2">启动成功</span>
          <span v-if="this.Details.bookStart == 3">启动失败</span>
          <span v-if="this.Details.bookStart == 4">失效</span>
        </el-form-item>
        <el-form-item label="预约开始时间：">
          <span v-if="this.Details.bookStartTime">{{
            transformDate(this.Details.bookStartTime)
          }}</span>
        </el-form-item>
        <el-form-item label="预约结束时间：">
          <span v-if="this.Details.bookEndTime">{{
            transformDate(this.Details.bookEndTime)
          }}</span>
        </el-form-item>
        <el-form-item label="创建时间：">
          {{ transformDate(this.Details.createTime) }}
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑界面 -->
    <el-dialog
      title="设置停车费"
      :visible.sync="editFormVisiiblePark"
      width="20%"
    >
      <el-form label-width="60px">
        <el-form-item label="停车费">
          <el-input
            size="small"
            v-model="park"
            auto-complete="off"
            placeholder="请输入停车费"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialogPark()">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="addPark()"
          >添加</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
</template>

<script>
import { getOrderList, getOrderInfo, setOrderPark } from "../../api/userMG";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      OrderData: [],
      loading: false,
      userName: "",
      name: "",
      status: "",
      stationName: "",
      portName: "",
      userId: "",
      startTime: "",
      endTime: "",
      timestamp: "",
      timestamps: "",
      flag: "",
      id: "",
      options: [
        {
          value: 1,
          label: "待充电"
        },
        {
          value: 2,
          label: "充电中"
        },
        {
          value: 3,
          label: "充电完成"
        }
      ],
      options1: [
        {
          value: 0,
          label: "不是"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      editFormDetails: false,
      Details: [],
      editFormVisiiblePark: false,
      park: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 10
      },
      seconds: 0
    };
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(1);
  },
  methods: {
    // 秒转分
    secondsToMinutes(seconds) {
      if (seconds === null || seconds === undefined) {
        return "0 分钟";
      }
      const minutes = Math.floor(seconds / 60);
      return `${minutes} 分钟`;
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.page = parm.currentPage;
      this.getdata(parm.currentPage);
    },
    // 打开Park编辑器
    OpenPark(row) {
      var userdata = JSON.parse(localStorage.getItem("userdata"));
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^(?!(\s+$))/,
        inputErrorMessage: "不可以空数据提交!"
      })
        .then(({ value }) => {
          if (value === userdata.menuTwo) {
            this.id = row.id;
            this.park = row.park;
            this.editFormVisiiblePark = true;
          } else {
            this.$message({
              type: "error",
              message: "密码错误"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    addPark() {
      this.loading = true;
      // this.park = this.park.toFixed(0)
      setOrderPark({
        id: this.id,
        park: this.park
      }).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.editFormVisiiblePark = false;
          this.$message.success(res.msg);
          this.getdata(this.pageparm.currentPage);
        } else {
          this.editFormVisiiblePark = false;
          this.$message.error(res.msg);
        }
      });
    },
    // 关闭Park编辑对话框
    closeDialogPark() {
      this.editFormVisiiblePark = false;
      this.$message({
        type: "info",
        message: "已取消编辑"
      });
    },
    exportExcel() {
      var parameter = {
        page: -2,
        userName: this.userName,
        name: this.name,
        status: this.status,
        stationName: this.stationName,
        portName: this.portName,
        userId: this.userId,
        startTime: this.timestamp,
        endTime: this.timestamps,
        flag: this.flag
      };
      getOrderList(parameter).then(res => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg
          });
        } else {
          this.OrderData = res.data.list;
          return;
        }
      });
      setTimeout(() => {
        //转换成excel时，使用原始的格式
        var xlsxParam = { raw: true };
        let fix = document.querySelector(".el-table__fixed-right");
        let wb;
        //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
        if (fix) {
          console.log('XLSX========',XLSX)
          wb = XLSX.utils.table_to_book(
            this.$refs.multipleTable.$el.removeChild(fix),
            xlsxParam
          );
          this.$refs.multipleTable.$el.appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(
            this.$refs.multipleTable.$el,
            xlsxParam
          );
        }
        var wbout = XLSX.write(wb, {
          bookType: "xls",
          bookSST: true,
          type: "array"
        });
        try {
          // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(
              new Blob([wbout], { type: "application/octet-stream" }),
              "充电桩订单列表.xlsx"
            );
          } else {
            // 在其他浏览器中使用file-saver保存文件
            saveAs(
              new Blob([wbout], { type: "application/octet-stream" }),
              "充电桩订单列表.xlsx"
            );
          }
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }, 1000);
      setTimeout(() => {
        this.getdata(1);
      }, 2000);
    },
    // 详情
    getXQ(row) {
      this.loading = true;
      this.editFormDetails = true;
      let data = {
        id: row.id
      };
      getOrderInfo(data).then(res => {
        this.loading = false;
        console.log(res);
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg
          });
        } else {
          this.Details = res.data.data;
          return;
        }
      });
    },
    // 枪连接状态
    Connection: function(row) {
      if (row.connection == 0) {
        return "已连接";
      } else if (row.connection == 1) {
        return "未连接";
      }
    },
    // 支付方式
    PayWay: function(row) {
      if (row.payWay == 1) {
        return "微信支付";
      } else if (row.payWay == 2) {
        return "余额";
      }
    },
    // 订单状态
    Status: function(row) {
      if (row.status == 0) {
        return "待激活";
      } else if (row.status == 1) {
        return "待充电";
      } else if (row.status == 2) {
        return "充电中";
      } else if (row.status == 3) {
        return "充电完成";
      } else if (row.status == 4) {
        return "已关闭";
      }
    },
    // 支付状态
    PayStatus: function(row) {
      if (row.payStatus == 0) {
        return "待支付";
      } else if (row.payStatus == 1) {
        return "部分支付";
      } else if (row.payStatus == 2) {
        return "全部支付";
      }
    },
    // 重置数据
    chongzhi() {
      this.userName = "";
      this.name = "";
      this.status = "";
      this.stationName = "";
      this.portName = "";
      this.userId = "";
      this.startTime = "";
      this.endTime = "";
      this.timestamp = "";
      this.timestamps = "";
      this.flag = "";
      this.getdata(1);
    },
    // 搜索数据
    search() {
      if (this.startTime != "") {
        this.timestamp = Math.floor(new Date(this.startTime).getTime() / 1000);
      }
      if (this.endTime != "") {
        this.timestamps = Math.floor(new Date(this.endTime).getTime() / 1000);
      }
      this.getdata(1);
    },
    // 获取数据
    getdata(page) {
      this.loading = true;
      var parameter = {
        page: (page - 1) * 20,
        userName: this.userName,
        name: this.name,
        status: this.status,
        stationName: this.stationName,
        portName: this.portName,
        userId: this.userId,
        startTime: this.timestamp,
        endTime: this.timestamps,
        flag: this.flag
      };
      getOrderList(parameter).then(res => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg
          });
        } else {
          this.OrderData = res.data.list;
          this.pageparm.currentPage = page;
          this.pageparm.total = res.data.count;
          return;
        }
      });
    }
  }
};
</script>

<style></style>
